.tour {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);

  &.open {
    display: block;
  }

  .tip {
    position: absolute;
    top: var(--tip-top, 0);
    left: var(--tip-left, 0);
    z-index: 1001;
    padding: 12px;
    width: fit-content;
    height: fit-content;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #454545;
    background: #252525;
    box-shadow:
      0 6px 16px 0 #00000014,
      0 3px 6px -4px #0000001f,
      0 9px 28px 8px #0000000d;
    color: #ccc;
    font-size: 13px;
    line-height: 1;
    text-wrap: nowrap;
    transition:
      top 200ms,
      left 200ms;

    &.left {
      transform: translate(-100%, -50%);
    }

    &.right {
      transform: translate(0, -50%);
    }

    &.top {
      transform: translate(-50%, -100%);
    }

    &.bottom {
      transform: translate(-50%, 0);
    }

    .btns {
      user-select: none;

      .prev,
      .next {
        cursor: pointer;
      }

      .next {
        color: #3794ff;
      }
    }

    .close {
      cursor: pointer;
    }
  }
}

.tourStep {
  position: relative;
  z-index: 1000;
  pointer-events: none;
}

.hide {
  display: none;
}
